<template>
  <div class="tab">
    <el-tabs
      type="border-card"
      v-model="activeName"
      @tab-click="handleClick"
      class="demo-tabs"
    >
      <el-tab-pane label="出发城市" name="first"> </el-tab-pane>
      <el-tab-pane label="到达城市" name="second"> </el-tab-pane>
      <div
        id="main2"
        ref="barDom"
        :style="{ width: '450px', height: '361px' }"
      ></div>
    </el-tabs>

    <el-select v-model="value" class="m-2" placeholder="今日" size="large">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        @click="changeDay"
      />
    </el-select>
  </div>
</template>

<script setup>
import { myresize } from "../hooks/resize";
import * as echarts from "echarts";
import { onMounted, reactive, ref, watch, watchEffect } from "vue";
import axios from "axios";
const value = ref("day");
const barDom = ref(null);
let color = ref({ color: "#559EFD" });
let arr = ref([
  10497, 13174, 18203, 19325, 23489, 31000, 29034, 31000, 63023, 64832,
]);
let myChart;
const activeName = ref("first");
let toArr = ref([
  10497, 13174, 18203, 19325, 23489, 31000, 29034, 31000, 63023, 64832,
]);
let fromArr = ref([
  10497, 23174, 28203, 29325, 33489, 37000, 29034, 31000, 63023, 84832,
]);

const options = [
  {
    value: "day",
    label: "今日",
  },
  {
    value: "week",
    label: "近一周",
  },
  {
    value: "month",
    label: "近一月",
  },
];
const handleClick = (tab) => {
  switch (tab.index) {
    case "0":
      arr.value = toArr.value;
      break;
    case "1":
      arr.value = fromArr.value;
      break;
  }
  init();
};
function init() {
  let chartDom = barDom.value;
  if (myChart != null && myChart != "" && myChart != undefined) {
    myChart.dispose(); //销毁
  }
  myChart = echarts.init(chartDom);
  let option;
  option = {
    title: {
      text: "热门出发/到达城市排名",
      textStyle: {
        color: "#559EFD",
      },
      textAlign: "left",
    },
    xAxis: {
      type: "value",
      show: false,
    },
    yAxis: {
      type: "category",
      data: [
        "三亚",
        "深圳",
        "北京",
        "上海",
        "武汉",
        "香港",
        "澳门",
        "成都",
        "桂林",
        "哈尔滨",
      ],
    },
    series: [
      {
        name: "2011",
        type: "bar",
        data: arr.value,
        itemStyle: {
          color: color.value.color,
        },
      },
    ],
  };
  myChart.setOption(option);
  myresize(myChart);
}
const changeDay = () => {
  axios.get("/getCity", { params: { type: value.value } }).then((res) => {
    if (res.status == 200) {
      console.log(res.data);
      color.value.color = res.data.background;
      toArr.value = res.data.list[0].toArr;
      fromArr.value = res.data.list[0].fromArr;
      arr.value = toArr.value;
      init();
    }
  });
};
onMounted(() => {
  init();
});
</script>

<style lang="scss">
.tab {
  width: 100%;
  height: 100%;
  display: flex;
}
.demo-tabs {
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-tabs__content {
    width: 100%;
    height: 361px;
    .el-tab-pane {
      color: #6b778c;
      font-weight: 600;
    }
  }
}
</style>
